<template>
    <div class="register">
        <header><img src="../assets/assets/头部.png" alt=""></header>
        <div class="port">
            <div><img src="../assets/assets/编组.svg" alt=""></div>
        </div>
        <div class="box">
            <input type="text" placeholder="请输入手机号" v-model="phone">
            <input type="text" placeholder="请输入用户名" v-model="user">
            <input type="password" placeholder="确认密码" v-model="password">
        </div>
        <div class="btn" @click="register">注册</div>
        <router-link to="./login">
            <p>已有账号去登录</p>
        </router-link>
    </div>
</template>

<script setup>
import { post } from '../utils/request.js'
import { verify } from "../utils/utils"

import { ref, computed } from 'vue';
import router from '@/router';
let phone = ref("")
let user = ref("")
let password = ref("")
//正则验证
let changeUserPhone = computed(() => {
    return verify('phone', phone.value);
});

let changeUserPassword = computed(() => {
    return verify('password', password.value);
});

let changeUserName = computed(() => {
    return verify('name', user.value);
});
//请求数据
const register = async () => {
    if (changeUserPhone.value && changeUserPassword.value && changeUserName.value) {
        let res = await post("/register", {
            "name": user.value,
            "password": password.value,
            "phone": phone.value
        })
        console.log(res)
        router.push("/login")
        console.log("注册成功");
    } else {
        console.log("注册失败");
    }
}




</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

.register {
    width: 100%;
    height: 6.67rem;

    header {
        width: 100%;
        height: .2rem;
        background-color: aliceblue;

    }

    .port {
        width: 100%;
        height: 2.26rem;
        padding-top: 1.2rem;
        box-sizing: border-box;

        div {
            width: .66rem;
            height: .66rem;
            border-radius: 50%;
            margin: 0 auto;
            background-color: gray;
        }
    }

    .box {
        width: 2.95rem;
        height: 1.76rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 auto;
        margin-bottom: .32rem;

        input {
            width: 2.95rem;
            height: .48rem;
            background-color: #F9F9F9;
            border-radius: .06rem;
            box-sizing: border-box;
            border: none;
            text-indent: .2rem;
        }
    }

    .btn {

        background-color: #0091FF;
        width: 2.95rem;
        height: .48rem;
        margin-top: 0.32rem;
        margin: 0 auto;
        font-size: .16rem;
        text-align: center;
        line-height: .48rem;
        color: white;
        border-radius: .04rem;

    }

    p {
        text-align: center;
    }
}
</style>